import React, { useState } from 'react';
import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js';

const PhoneInput = () => {
  const [phone, setPhone] = useState('');
  const [country, setCountry] = useState('US'); // 默认国家代码（如 US、CN、IN 等）
  const [error, setError] = useState('');

  const validatePhone = () => {
    // 简单验证：检查格式是否正确
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    if (!isValidPhoneNumber(phone, country as any)) {
      setError(`请输入有效的${country}电话号码`);
      return false;
    }

    // 高级验证：解析号码获取更多信息（如类型、区号等）
    try {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const phoneNumber = parsePhoneNumber(phone, country as any);
      if (phoneNumber.isValid()) {
        setError('');
        console.log('验证通过：', {
          country: phoneNumber.country,
          nationalNumber: phoneNumber.nationalNumber,
          internationalFormat: phoneNumber.formatInternational()
        });
        return true;
      } else {
        setError('电话号码格式不正确');
        return false;
      }
    } catch (err) {
      setError('请检查输入的号码');
      console.info('验证错误:', err);
      return false;
    }
  };

  return (
    <div style={{ margin: '20px' }}>
      <select
        value={country}
        onChange={(e) => setCountry(e.target.value)}
        style={{ marginRight: '10px', padding: '8px' }}
      >
        <option value="CN">中国 (+86)</option>
        <option value="US">美国 (+1)</option>
        <option value="IN">印度 (+91)</option>
        <option value="GB">英国 (+44)</option>
        {/* 可添加更多国家代码 */}
      </select>

      <input
        type="tel"
        value={phone}
        onChange={(e) => setPhone(e.target.value)}
        placeholder="输入电话号码"
        style={{ padding: '8px', width: '200px' }}
      />

      <button
        onClick={validatePhone}
        style={{ marginLeft: '10px', padding: '8px 16px' }}
      >
        验证
      </button>

      {error && <p style={{ color: 'red', marginTop: '10px' }}>{error}</p>}
      {!error && <p style={{ color: 'green', marginTop: '10px' }}>验证通过</p>}
    </div>
  );
};

export default PhoneInput;
